<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->

<head>
  <title>Typography | Berry Bootstrap 5 Admin Template</title>
  <!-- [Meta] -->
  <meta charset="utf-8" />
  <script src="/myhouse/static/mediator/js/plugins/popper.min.js"></script>
  <script type="text/javascript" src="/myhouse/static/mediator/js/jquery-3.2.1.min.js"></script>
  <script src="/myhouse/static/mediator/js/plugins/simplebar.min.js"></script>
  <script src="/myhouse/static/mediator/js/plugins/bootstrap.min.js"></script>
  <script src="/myhouse/static/mediator/js/config.js"></script>
  <script src="/myhouse/static/mediator/js/pcoded.js"></script>
  <script src="/myhouse/static/mediator/js/plugins/clipboard.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta
    name="description"
    content="Berry is made using Bootstrap 5 design framework. Download the free admin template & use it for your project."
  />
  <meta name="keywords" content="Berry, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template" />
  
  <!-- [Favicon] icon -->
  <link rel="icon" href="/myhouse/static/mediator/images/favicon.svg" type="image/x-icon" />
 <!-- [Google Font] Family -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link" />
<!-- [Tabler Icons] https://tablericons.com -->
<link rel="stylesheet" href="/myhouse/static/mediator/fonts/tabler-icons.min.css" />
<!-- [Material Icons] https://fonts.google.com/icons -->
<link rel="stylesheet" href="/myhouse/static/mediator/fonts/material.css" />
<!-- [Template CSS Files] -->
<link rel="stylesheet" href="/myhouse/static/mediator/css/style.css" id="main-style-link" />
<link rel="stylesheet" href="/myhouse/static/mediator/css/style-preset.css" id="preset-style-link" />

</head>
<!-- [Head] end -->
<!-- [Body] Start -->

<body>
  <!-- [ Pre-loader ] start -->
<div class="loader-bg">
  <div class="loader-track">
    <div class="loader-fill"></div>
  </div>
</div>
<!-- [ Pre-loader ] End -->
 <!-- [ Header Topbar ] start -->
  <jsp:include page="/inc/mediatorTop.jsp"></jsp:include>
<!-- [ Header ] end -->
 <!-- [ Sidebar Menu ] start -->
<nav class="pc-sidebar">
  <div class="navbar-wrapper">
    <div class="m-header">
      <a href="index.jsp" class="b-brand">
        <!-- ========   Change your logo from here   ============ -->
        <img src="/myhouse/static/mediator/images/logo-dark.svg" alt="" class="logo logo-lg" />
      </a>
    </div>
    <jsp:include page="/inc/mediatorLeft.jsp"></jsp:include>
  </div>
</nav>
<!-- [ Sidebar Menu ] end -->

<style type="text/css">
  table{
    font-size: 20px;
  }
  input[type="submit"]{
    position: relative;
    left: 250px;
    top: 50px;
    width: 200px;
  }
  td{
    width: 200px;
  }
</style>

  <script type="text/javascript">
    $(function (){
      $("#myform").submit(all);
    });
    function all(){
      var name = check();
      var password = pass();
      var phone = phoneby();
      var e = emails();
      return name&&password&&phone&&e;
    }
  </script>
  <div class="pc-container">
    <div class="pc-content">
      <!-- [ breadcrumb ] start -->
      <div class="page-header">
        <div class="page-block">
          <div class="row align-items-center">
            <div class="col-md-12">
              <div class="page-header-title">
                <h5 class="m-b-10">个人信息</h5>
              </div>
              <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="/myhouse/mediator/index">首页</a></li>
                <li class="breadcrumb-item"><a href="javascript: void(0)">完善/修改个人信息</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <!-- [ sample-page ] start -->
        <div class="col-sm-12">
          <div class="card">
            <div class="card-header">
              <h5>个人信息</h5>
            </div>
            <div class="card-body" style="height: 800px; text-align: center">
  <!-- [ Main Content ] start -->

    <c:if test="${empty sessionScope.mediator.mediatorName}">
      <div id="mydiv">请先登录</div>
    </c:if>


<script type="text/javascript">
  $(function (){
    $("#img").change(function (){
      chages()
    });
  })
</script>

    <c:if test="${not empty sessionScope.mediator.mediatorName}">

      <form id="myform" method="post" action="/myhouse/mediator/updateInfo" enctype="multipart/form-data">
        <input type="hidden" value="${sessionScope.mediator.id}" name="id">
        <input type="hidden" value="${sessionScope.mediator.headImg}" name="headImg">
        <table width="800px" style="height: 500px; text-align: center">

          <tr>
            <th>修改头像</th>
          </tr>

          <tr>
            <td style="position: relative;left: 60px;"> <img width="200px" src="/myhouse/static/mediator/images/${sessionScope.mediator.headImg}" id="imgs"></td>
            <td style="position: relative;left: 60px;">
              <input type="file" name="face" id="img">
<%--              <img src="" id="imgs">--%>
            </td>
          </tr>
          <tr>
            <th>用户名</th>
            <td><input type="text" value="${sessionScope.mediator.mediatorName}" name="mediatorName" style="width:250px;"></td>
            <td><span id="name"></span></td>
          </tr>
          <tr>
            <th>密码</th>
            <td> <input type="password" value="${sessionScope.mediator.mediatorPass}" disabled name="mediatorPass" style="width:250px;">

            </td><td style="position: relative;left: -120px;"><a href="/myhouse/mediator/amend?id=${sessionScope.mediator.id}">修改密码</a></td>

          </tr>
          <tr>
            <th>手机号</th>
            <td> <input type="text" value="${sessionScope.mediator.mediatorPhone}" name="mediatorPhone" style="width:250px;"></td>
            <td><span id="phone"></span></td>
          </tr>
          <tr>
            <th>注册时间</th>
            <td>
              <div style="border: 1px solid black; text-align: left; background-color: white; width: 250px; position: relative; left: 70px; border-radius: 2px;">
                &nbsp;<fmt:formatDate value="${sessionScope.mediator.mediatorRegtime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
              </div>

            </td>
            <td></td>
          </tr>
          <tr>
            <th>邮箱</th>
            <td> <input type="text" value="${sessionScope.mediator.email}" name="email" style="width:250px;"></td>
            <td><span id="email"></span></td>
          </tr>
          <tr>
            <th>办公地址</th>
            <td> <input type="text" value="${sessionScope.mediator.officeAddress}" name="officeAddress" style="width:250px;"></td>
          </tr>
        </table>
        <input type="submit" value="修 改" class="btn btn-secondary" disabled style="position: relative;left: -300px;">
        <input type="hidden" name="id" value="${sessionScope.mediator.id}">
      </form>
    </c:if>


  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  <script>//表单验证
  function check(){//用户名
    var usname = $("input[name=mediatorName]").val()
    var reg = /^[\u4e00-\u999ffffA-Za-z0-9_]{2,10}$/;
    if (reg.test(usname)){
      $("#name").html("√")
      $("#name").css("color","green");
      return true;
    }else {
      $("#name").html("不合法")
      $("#name").css("color","red");
      return false;
    }
  }
  </script>
  <script>//判断密码是否合法
    function pass(){
      let pass =  $("input[name=mediatorPass]").val();
      let regs = /^\w{6,8}$/
      if(regs.test(pass)){
        $("#pass").text("√");
        $("#pass").css("color","green");
        return true;
      }
      else{
        $("#pass").text("请输入6-8位大小写英文字母和数字！");
        $("#pass").css("color","red");
        return false;
      }
    }
  </script>
  <script>//判断手机号合不合法
  function phoneby(){
    let phones = $("input[name=mediatorPhone]").val()
    let red = /^\d{11}$/;
    if (red.test(phones)&&phones!=""){
      $("#phone").text("√");
      $("#phone").css("color","green");
      return true;
    }else {
      $("#phone").text("手机号不合法");
      $("#phone").css("color","red");
      return false;
    }
  }
  </script>
  <script>//判断邮箱合不合法
    function emails(){
      let ems = $("input[name=email]").val();
      let res = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (res.test(ems)){
          $("#email").text("√")
          $("#email").css("color","green");
          return true;
      }else {
        $("#email").text("您的邮箱未包含@qq.com")
        $("#email").css("color","red");
        return false;
      }
    }
  </script>

  <script type="text/javascript">

    $(function (){
      $("input[name='mediatorName']").change(chages);
      $("input[name='mediatorPass']").change(chages);
      $("input[name='mediatorPhone']").change(chages);
      $("input[name='email']").change(chages);
      $("input[name='officeAddress']").change(chages);
      $("input[name='mediatorName']").blur(check);
      $("input[name='mediatorPass']").blur(pass);
      $("input[name='mediatorPhone']").blur(phoneby);
      $("input[name='email']").blur(emails);
    });
  </script>
<script type="text/javascript">
  function chages(){
      $("input[type='submit']").attr("disabled", false);
  }
</script>

  <!-- [ Main Content ] end -->
<style type="text/css">
  #outer{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #mydiv{
    font-size: 100px;
    font-family: "华文楷体";
   margin-top: 100px;
  }
</style>
 <!-- Required Js -->

  <script>
    window.addEventListener('load', (event) => {
      var i_clip = new ClipboardJS('.color-block');
      i_clip.on('success', function (e) {
        var targetElement = e.trigger;
        let icon_badge = document.createElement('span');
        icon_badge.setAttribute('class', 'ic-badge badge bg-success float-end');
        icon_badge.innerHTML = "copied";
        targetElement.append(icon_badge);
        setTimeout(function () {
          targetElement.children[0].remove();
        }, 3000);
      });

      i_clip.on('error', function (e) {
        var targetElement = e.trigger;
        let icon_badge = document.createElement('span');
        icon_badge.setAttribute('class', 'ic-badge badge bg-danger float-end');
        icon_badge.innerHTML = "Error";
        targetElement.append(icon_badge);
        setTimeout(function () {
          targetElement.children[0].remove();
        }, 3000);
      });
    });
  </script>
</body>
<script type="text/javascript">
  $(function (){
    $("#img").change(preview);
  })
  function preview(){
    var inputFile = document.getElementById("img");
    var files = inputFile.files;
    var fileReader = new FileReader();
    fileReader.onload = function (e){
      $("#imgs").attr("src",e.target.result);
    }
    fileReader.readAsDataURL(files[0]);
  }

</script>

</html>